<template>
  <el-container class="contact-container">
    <el-header height="70px">
      <Navigation />
    </el-header>
    <el-main>
      <!-- 联系我们 -->
      <div class="contact-user">
        <img src="https://img.xnxx.mengcreate.com/LJL/contact1.png" alt="" class="contact-img">
        <div class="container">
          <p class="contact-title">联系我们</p>
        </div>
      </div>

      <!-- 品牌总部 -->
      <div class="contact-item">
        <div class="container">
          <div class="contact-type">
            <div class="contact-list">
              <p>品牌总部</p>
              <p>长沙美家乐装饰材料有限公司</p>
              <p>地址：湖南省长沙市开福区香江红星美凯龙A馆</p>
              <p>邮政：410005</p>
            </div>
            <div class="contact-list">
              <p>售后服务</p>
              <p>24小时服务热线 400 100 8952</p>
            </div>
            <div class="contact-list">
              <p>墙艺培训</p>
              <p>0731-85123398 昌海老师</p>
            </div>
            <div class="contact-list">
              <p>招商加盟</p>
              <p>
                13786170099 陈雨<br>
                13632761543 陈健
              </p>
            </div>

          </div>
          <div class="contact-map">

            <!-- <img src=" https://img.xnxx.mengcreate.com/LJL/map.png" alt=""> -->
            <baidu-map class="bm-view" :center="{lng:  112.991302, lat: 28.308510}" :zoom="18">
              <bm-marker :position="{lng: 112.991302, lat: 28.308322}" animation="BMAP_ANIMATION_BOUNCE"
                :dragging="true" @click="infoWindowOpen">
                <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">
                  <div>
                    <h4 style="line-heighy:10px">懒精灵艺术涂料（运营中心）</h4>
                    <p style="line-height: 10px;">湖南省长沙市开福区香江红星美凯龙A馆二楼(2010-2014)</p>
                  </div>
                </bm-info-window>
              </bm-marker>
            </baidu-map>
          </div>
        </div>
      </div>

      <!-- 加入我们 -->
      <div class="contact-user">
        <img src="https://img.xnxx.mengcreate.com/LJL/contact2.png" alt="" class="contact-img2">
        <div class="container">
          <p class="contact-title">加入我们</p>
        </div>
      </div>

      <!-- 招聘 -->
      <div class="container recruit">
        <el-collapse accordion>
          <el-collapse-item v-for="(item,i) in contact" :key="i">
            <template slot="title">
              <div class="recruit-title">
                <div class="recruit-name">{{item.title}}</div>
                <div class="recruit-describe hidden-sm-and-down">
                  <span>工作地点：长沙</span>
                  <span>招聘人数：{{item.num}}</span>
                  <span>更新时间：{{item.pudate}}</span>
                </div>
              </div>
            </template>
            <div>
              <h3>工作职责：</h3>
              <p v-for="(content1,index) in item.content1" :key="index">
                {{content1}}
              </p>
            </div>
            <div>
              <h3>职务要求：</h3>
              <p v-for="(content2,index2) in item.content2" :key="index2">
                {{content2}}
              </p>
            </div>
            <p style="margin-top:2rem">请发送简历至邮箱：{{item.email}}</p>
          </el-collapse-item>

        </el-collapse>
      </div>

    </el-main>
    <el-footer style="padding:0;">
      <Footer style="background-color:#000000;" />
    </el-footer>
  </el-container>
</template>

<script>
import Navigation from '@/components/common/navigation/Navigation2.vue'
import Footer from '@/components/common/footer/Footer.vue'
import { getContact } from '@/api/data.js'
import './base.css'
export default {
  components: {
    Navigation,
    Footer
  },
  data () {
    return {
      contact: [

      ],
      show: false
    }
  },
  created () {
    this.loadContact()
  },
  methods: {
    async loadContact () {
      const { data: res } = await getContact()
      this.contact = res.data
      for (let i of this.contact) {
        i.content1 = i.content1.split("\n")
        i.content2 = i.content2.split("\n")
      }
      console.log(this.contact[0].content1)
    },
    infoWindowClose () {
      this.show = false
    },
    infoWindowOpen () {
      this.show = true
    }
  }
}
</script>

<style lang='less' scoped>
.details-container {
  position: relative;
  .el-header {
    position: fixed;
    top: 00px;
    z-index: 10000;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
  }
}
.el-header {
  background-color: var(--color-background);
  display: flex;
  align-items: center;
}

.el-main {
  padding: 0;
  width: 100%;
  .contact-user {
    background: #23886c;
    height: 15rem;
    width: 100%;
    position: relative;
    .contact-img {
      position: absolute;
      left: -15%;
      width: 100%;
      height: 100%;
    }
    .contact-img2 {
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .container {
      position: absolute;
      left: 50%;
      height: 50%;
      transform: translate(-50%, 34%);
      p {
        display: inline-block;
        color: #fff;
        font-weight: 500;
        font-size: 1rem;
        border-bottom: 1.5px solid #fff;
        padding-bottom: 0.3rem;
      }
    }
  }

  .contact-item {
    padding: 4rem 0;
    .container {
      display: flex;
      .contact-type {
        flex: 1;
        .contact-list {
          p:nth-child(1) {
            color: #23886c;
            font-weight: 500;
            margin-top: 2rem;
          }
          p:nth-child(1)::after {
            content: "";
            display: block;
            width: 2.6rem;
            height: 1.5px;
            margin-top: 0.4rem;
            background: #23886c;
          }
        }
        .contact-list:nth-child(1) {
          p:nth-child(1) {
            color: #23886c;
            font-weight: 500;
            margin-top: 0rem;
          }
        }
      }
      .contact-map {
        padding-top: 3rem;
        flex: 1;
        width: 100%;
        .bm-view {
          width: 100%;
          height: 300px;
        }
      }
    }
  }

  .recruit {
    .el-collapse {
      .el-collapse-item {
        border: 1px solid #cccccc;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 20px;
        margin: 2rem 0 1rem;
        padding: 2rem;
        .recruit-title {
          display: flex;
          justify-content: space-between;
          flex: 1;
          font-size: 1.2rem;
          .recruit-name {
            color: #23886c;
          }
          .recruit-describe {
            margin-right: 5rem;
            font-size: 1rem;
            span {
              margin-left: 4rem;
            }
          }
        }
        .emil {
          margin-top: 2rem;
        }
      }
    }
  }
}
@media only screen and (max-width: 786px) {
  .container {
    padding: 0 20px;
  }
  .el-main {
    .contact-item {
      .container {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 20px;

        .contact-title {
        }
        .contact-type {
          .contact-list {
          }
        }
      }
    }
    .container {
      padding: 0 20px;
    }
  }
}
</style>